studio: URL routing, grid padding fix, and de-jargoned copy#7
Conversation
The view lived purely in React state, so a browser reload always reset to the Overview. Make the current view part of the URL (real History API, not a hash) so a reload or shared deep link restores it. - lib/router.ts: Route <-> pathname mapping under the /~studio base - app.tsx: init from window.location, pushState on navigate, popstate listener - http.rs: SPA history fallback — serve index.html for any /~studio/* path that isn't an embedded asset; paths with a file extension stay a genuine 404 - tests: studio_deep_link_falls_back_to_the_shell - README: Routing section
RDG 7 wraps its styles in `@layer rdg`; imported before Tailwind (in main.tsx)
it registered first = lowest priority, so Tailwind v4 Preflight's
`*{padding:0}` (in `base`) flattened every cell.
Import RDG's stylesheet from index.css *after* Tailwind, so `@layer rdg`
registers after `base` and RDG's cell padding wins. Our unlayered `.rdg{}`
token overrides still beat everything.
Internal design doctrine had leaked into rendered strings — 'the floor', 'provenance, not governance', 'predicate IR', RFD numbers, 'the seam is preparatory, not protective', etc. Rewrite the 16 leaked strings to plain language, keeping real identifiers a developer needs (/rest/v1 endpoints, = me, spock_actor(), storage_object, spock_refuse()). Code comments, which don't render, are left as-is.
|
Warning Review limit reached
Next review available in: 48 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
WalkthroughStudio navigation now synchronizes routes with browser URLs, supports deep-link restoration through server-side SPA fallback, and adds coverage for that behavior. Studio copy, refusal labels, and React Data Grid stylesheet ordering were also updated. ChangesStudio SPA routing
Studio presentation updates
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant Browser
participant App
participant Router
participant Server
Browser->>Server: Request /~studio/deep-link
Server-->>Browser: SPA index.html
Browser->>App: Load current pathname
App->>Router: pathToRoute(pathname)
Router-->>App: Selected Route
App->>Browser: pushState and update title
Browser-->>App: popstate on back/forward
App->>Router: pathToRoute(current pathname)
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@crates/spock-runtime/studio/src/lib/router.ts`:
- Around line 65-66: Update the "record" case in the route-name switch so a
missing name returns the "records" route, matching the existing table and fn
fallbacks; preserve the named-record route behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 2324dbd4-f252-40a0-a23e-47a0425229d7
📒 Files selected for processing (12)
crates/spock-runtime/src/http.rscrates/spock-runtime/studio/README.mdcrates/spock-runtime/studio/src/app.tsxcrates/spock-runtime/studio/src/components/err-codes.tsxcrates/spock-runtime/studio/src/index.csscrates/spock-runtime/studio/src/lib/router.tscrates/spock-runtime/studio/src/main.tsxcrates/spock-runtime/studio/src/views/fn-runner.tsxcrates/spock-runtime/studio/src/views/overview.tsxcrates/spock-runtime/studio/src/views/storage-view.tsxcrates/spock-runtime/studio/src/views/table-view.tsxcrates/spock-runtime/tests/http.rs
CodeRabbit: a nameless `record` fell back to `overview` while `table`->`tables` and `fn`->`fns`. Make it consistent (`record` no-name -> `records`), and give the `records` kind a view: renderView now falls back to the home summary for records-level paths (records have per-record pages but no dedicated overview), which also fixes the previously-blank `/~studio/records`.
1 participant
Three studio improvements, one per commit.
1. URL-based page routing (
feat)The view lived purely in React state, so a browser reload always dropped you back on the Overview. The current view is now part of the URL via the History API (not a
#hash), so a hard reload or a shared deep link restores it.lib/router.ts—Route ↔ pathnamemapping under the/~studiobase (/~studio/table/user,/~studio/fn/create_post,/~studio/storage, …)app.tsx— initial view read fromwindow.location;navigate()doespushState; apopstatelistener mirrors back/forward into the viewhttp.rs— matching SPA history fallback: any/~studio/*path that isn't an embedded asset servesindex.html; a path whose last segment has a file extension stays a genuine404(so a broken script/style src fails loudly instead of silently loading HTML)studio_deep_link_falls_back_to_the_shell; README gets a Routing sectionThe impersonated Actor is intentionally kept out of the URL — it's a session toggle, so a reload restores the view but resets to anonymous.
2. Restore react-data-grid cell padding (
fix)RDG 7 wraps all its styles in
@layer rdg. Because it was imported before Tailwind (inmain.tsx), therdglayer registered first = lowest priority, so Tailwind v4 Preflight's* { padding: 0 }(in thebaselayer) flattened every cell — columns ran together with no inset. Fix: import RDG's stylesheet fromindex.cssafter Tailwind, so@layer rdgsorts afterbaseand RDG'spadding-inline: 8pxwins. Our unlayered.rdg{…}token overrides still beat everything.3. De-jargon user-facing copy (
refactor)Internal design doctrine had leaked into rendered strings — "the floor", "provenance, not governance", "predicate IR / PostgREST dialect", RFD numbers, "the seam is preparatory, not protective, until v1 policy", "exposure surface", etc. Rewrote the 16 leaked strings across
overview/table-view/fn-runner/storage-view/err-codesto plain language, keeping real identifiers a developer needs (/rest/v1/…endpoints,= me,spock_actor(),storage_object,spock_refuse()). Code comments (which don't render) are left as-is.Verification
tsc+oxlintclean;cargo test -p spock-runtime --test http studio(3 pass, incl. the new deep-link test); clippy + fmt greenexamples/instagram/v0.spock: reload/deep-link/back-forward restore the correct view; grid cells now have proper8pxpadding (dark mode intact); all five surfaces read in plain language; zero console errorsReviewer notes
studio/dist/is gitignored (built, not committed) — reviewers needpnpm buildincrates/spock-runtime/studiothencargo buildto see it in the binary, per the studio README